/**部门用能统计 */
import * as React from "react";
import ReactEcharts from "echarts-for-react";
export interface DepartmentStatisticsLineChartsProps {
  dataSouce: TotalData[];
}
interface TotalData {
  id: number;
  name: string;
  val: number;
}
export interface DepartmentStatisticsLineChartsState {}

class DepartmentStatisticsLineCharts extends React.Component<
  DepartmentStatisticsLineChartsProps,
  DepartmentStatisticsLineChartsState
> {
  render() {
    return (
      <div className="chart">
        <ReactEcharts
          option={this.getOption()}
          notMerge={true}
          lazyUpdate={true}
          style={{ height: 400 }}
        />
      </div>
    );
  }
  getTitBar(arr: TotalData[]) {
    let tit: string[] = [];
    let val: number[] = [];
    arr.map((item: TotalData) => {
      tit.push(item.name);
      val.push(item.val);
      return item;
    });
    return { tit, val };
  }
  getOption() {
    let { tit, val } = this.getTitBar(this.props.dataSouce);
    return {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: tit,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: val,
          type: "bar",
        },
      ],
    };
  }
}

export default DepartmentStatisticsLineCharts;
